<template>
  <div class="pd30 flex flexjcsa produceFactory">
    <div class="panelWrap main">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <span class="log-name">屏幕监播</span>
      </div>
      <div class="con">
        <div class="con-row flex flexac pl search-box">
          <div class="flex">
            <el-input v-model="queryParam.registerCode" clearable class="query-input m-r-15" placeholder="电梯注册代码" />
            <el-input v-model="queryParam.status" clearable class="query-input m-r-15" placeholder="位置码" />
            <el-input v-model="queryParam.useplace" clearable class="query-input m-r-15" placeholder="使用场所" />
            <el-select v-model="queryParam.useCompany" clearable class="isWechat-select coInput m-r-15" placeholder="使用单位">
              <el-option label="无" :value="0" />
            </el-select>
            <el-button type="primary">查询</el-button>
            <el-button v-show="!isMonitor" type="primary" @click="screenMonitor('ELEVATOR_IN_START')">开始监播</el-button>
            <el-button v-show="isMonitor" type="primary" @click="screenMonitor('ELEVATOR_IN_STOP')">停止监播</el-button>
          </div>
        </div>
        <div class="list-warp flex flexjcsb">
          <div v-for="item in list" :key="item.id" class="list-item flex">
            <span>电梯ID：{{ item.id }}</span>
            <span>使用单位：{{ item.company }}</span>
            <el-image :src="path">
              <div slot="error" class="image-slot">
                <el-image :src="require('@/assets/default.png')" alt=""> </el-image>
              </div>
            </el-image>
            <span>日期：{{ item.date }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { screenMonitor } from '@/api/operation/mediaMonitor'
import { screenCommand } from '@/api/operation/media/screen'
import { formatDateTimeimport, transData } from '@/utils/toolclass'
import { showNotice } from '@/utils/toolclass'

export default {
  name: 'ScreenSystem',
  props: {},
  data() {
    return {
      isMonitor: false,
      queryParam: {
        registerCode: '', // 电梯注册代码
        status: '', // 位置码
        useplace: '', // 使用场所
        useCompany: ''// 使用单位
      },
      list: [
        {
          id: 1,
          company: '',
          img: '',
          date: '2020-08-11'
        },
        {
          id: 2,
          company: '',
          img: '',
          date: '2020-08-18'
        },
        {
          id: 3,
          company: '',
          img: '',
          date: '2020-08-19'
        },
        {
          id: 4,
          company: '',
          img: '',
          date: '2020-06-21'
        },
        {
          id: 5,
          company: '',
          img: '',
          date: '2020-07-13'
        },
        {
          id: 6,
          company: '',
          img: '',
          date: '2020-08-16'
        }
      ],
      command: ['ELEVATOR_IN_START', 'ELEVATOR_IN_STOP'],
      path: ''
    }
  },
  computed: {

  },
  watch: {},
  created() {

  },
  mounted() {
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/government/mediaMonitoring/screenMonitoring/index' }))
  },
  methods: {
    getScreen() {
      screenMonitor().then(res => {
        this.path = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
      return this.getScreen
    },
    screenMonitor(command) {
      this.isMonitor = !this.isMonitor
      const params = {
        command: command,
        pushStreamUrl: '',
        screenId: '2'
      }
      screenCommand(params).then(res => {
        if (res.code === '000000') {
          const timer = setInterval(this.getScreen(), 5000)
          if(!this.isMonitor){
            this.$emit('close')
            clearInterval(timer)
          }
          this.$once('hook:beforeDestroy', () => {
            clearInterval(timer)
          })
          this.$once('close', () => {
            clearInterval(timer)
          })
        } else {

        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/public.scss";
.search-box {
  flex-wrap: wrap;
}
.panelWrap {
  height: 100%;
}
.main {
  width: 100%;
  height: 100%;
}
.list-warp {
  padding: 0 25px 30px;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.6;
  .list-item{
    width: 33.333%;
    margin-top: 30px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

::v-deep .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 30px;
}
 .el-image {
  width: 250px;
  height: 200px;
  margin: 10px 0;
}
</style>

